<template>
    <el-form ref="formData" :model="formData" :rules="rules" label-width="80px" class="login-box" @keyup.enter.native="Register()">
      <el-form-item prop="username" label="手机号">
        <el-input maxlength="11" v-model="formData.username" placeholder="请输入手机号" type="text" prefix-icon="icon-login_user" clearable/>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input maxlength="20" v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable/>
      </el-form-item>
      <el-form-item prop="checkPassword" label="确认密码">
        <el-input maxlength="20" v-model="formData.checkPassword" placeholder="再次输入密码" type="password" prefix-icon="icon-login_pwd" clearable/>
      </el-form-item>
      <el-form-item prop="roleid">
        <el-radio v-model="formData.roleid":label=1 >学生</el-radio>
        <el-radio v-model="formData.roleid":label=2 >老师</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round class="btnlocation" @click="Register('formData')" >提交</el-button>
        <el-button class="btnlocation" round @click="resetForm('formData')">重置</el-button></el-form-item>
      <el-link type="primary" v-on:click="$router.replace('/')">已有密码？登录</el-link>
    </el-form>
</template>
<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      var tele = (rule,value,calllback) => {
        const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        if(regMobile.test(value)){
          //合法的手机号
          return calllback()
        }
        //手机号不合法
        calllback(new Error('请输入合法的手机号！'));
      }

      return {
        formData: {
          username: '',
          password: '',
          roleid: 1,
        },
        rules: {
          username: [{ required: true, message: '手机号不能为空'},
                      { validator: tele,trigger: 'blur' }],
          password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
          checkPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]

        }
      };
    },
    methods: {
      Register(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$axios.post('/register',this.formData).then(res=>{
              console.log(res.data.code);
              if(res.data.code === 200){
                this.$message({
                  type: 'success',
                  message: '您已注册成功，请填写详细信息'
                });
                sessionStorage.setItem("uid",res.data.data);
                sessionStorage.setItem("user",this.formData.username);
                console.log(this.formData.roleid);
                if(this.formData.roleid === 1){
                  this.$router.push("/studentinfo");
                }else {
                  this.$router.push("/teacherinfo");
                }
              }else{
                this.$message({
                  type: 'error',
                  message: '用户已存在！'
                });
              }
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

    }
  };
</script>
<style lang="scss" scoped>
  .login-box {
    border: 10px solid #DCDFE6;
    width: 400px;
    margin: 200px auto;
    padding: 40px 60px 30px 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title {
    text-align: center;
    margin: 0 auto 40px 40px;
    color: #303133;
  }
  .btnlocation{
    margin: 8px 35px 10px auto;
  }
  .el-radio{
    margin: 8px 35px 10px auto;
  }
</style>
